<template>
 <div class="ebook">
   <title-bar :ifTitleAndMenuShow="ifTitleAndMenuShow"></title-bar>
   <div class="read-wrapper">
     <div id="read"></div>
     <div class="mark">
       <div class="left" @click="prePage"></div>
       <div class="center" @click="toggleTitleAndMenu"></div>
       <div class="right" @click="nextPage"></div>
     </div>
   </div>
   <menu-bar :ifTitleAndMenuShow="ifTitleAndMenuShow" ref="hideBar"></menu-bar>
 </div>
</template>

<script>
  import MenuBar from "./components/MenuBar";
  import TitleBar from "./components/TitleBar";
    import Epub from 'epubjs'
    const Download_url = '/static/2018_Book_DronesAndTheCreativeIndustry.epub'
    global.epub = Epub
    export default {
        name: "Ebook",
        components: {MenuBar, TitleBar},
        comments: {MenuBar, TitleBar},
        data(){
            return{
                book:{},
                ifTitleAndMenuShow: false
            }
        },
        methods: {
            // 电子书的解析和渲染
            showEpub(){
                // 生成ebook
                this.book = new Epub(Download_url)
                console.log(this.book)
                //生成rendition，通过Book.renderTo
                this.rendition = this.book.renderTo('read',{
                    width: window.innerWidth, // 设置屏幕最大宽度
                    height:window.innerHeight,//设置屏幕最大高度
                    minSpreadWidth: window.innerWidth // 可以设置最小宽度，可以使电子书在pc端显示一列
                } )
                //通过Rendition.display(）渲染电子书
                this.rendition.display()
            },
            toggleTitleAndMenu(){
              this.ifTitleAndMenuShow = !this.ifTitleAndMenuShow
                if(!this.ifTitleAndMenuShow){
                    this.$refs.hideBar.hideSetting()
                }
            },
            prePage(){
                if(this.rendition){
                    this.rendition.prev()
                }
            },
            nextPage(){
                if(this.rendition){
                    this.rendition.next()
                }
            }
        },
        mounted() {
            this.showEpub()
        }
    }

</script>

<style lang="scss" scoped>
@import "assets/styles/global";
  .ebook{
    position: relative;
    .read-wrapper{
      .mark{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        display: flex;
        width: 100%;
        height: 100%;
        .left{
          flex: 0 0 px2rem(100);
        }
        .center{
          flex: 1;
        }
        .right{
          flex: 0 0 px2rem(100);
        }
      }
    }
  }
</style>
